<script setup>
import {Button, CellGroup, Divider, Field, Form, Toast, Uploader} from "vant";
import {uploadPic} from "@/v-api/login";
import {Local} from "@/utils/storage";
import {reactive, ref} from "vue";
import router from "@/router";
import {modify} from "@/v-api/my";
import {add} from "@/v-api/addNews";

const showFile = ref([]);
const userInfo = Local.get('userInfo')
const ActivityForm = reactive({
  schoolId: 1,
  authorId: userInfo.userId,
  title: "",
  content: "",
  picture: "",
})
const afterRead = async(file) => {

  ActivityForm.picture=await uploadPic(file);
  Local.set('iconUrl',ActivityForm.picture);
};

const onOversize = (files) => {
  Toast(`文件大小不能超过 ${files[0].maxSize / 1024}MB`);
};
</script>

<template>
  <div class="bg">
    <Form @submit="add(ActivityForm)">
      <CellGroup style="border: 1px solid black">
        <Field
            name="图片"
            style="display: flex; align-items: center; justify-content: center;"
            label="图片"
            :rules="[{ required: true, message: '请上传头像' }]"
        ><template #label>
          <div class="label-style">图片</div>
        </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
          <template #input>
            <Uploader
                :after-read="afterRead"
                v-model="showFile"
                style="width: 155px"
                multiple
                :max-size="5000 * 1024"
                @oversize="onOversize"
                :max-count="1"
                reupload
                accept="image/png, image/jpeg, image/gif, image/jpg"
                upload-text="png / jpeg / gif / jpg 格式图片"
            >
            </Uploader>
          </template>
        </Field>
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
        >
        </Divider>
        <Field readonly>
          <template #label>
            <div class="label-style">标题</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field
            v-model="ActivityForm.title"
            rows="1"
            autosize
            type="textarea"
            maxlength="30"
            placeholder="请输入标题"
            show-word-limit
            size="large"
            :rules="[{ required: true, message: '请填写标题' }]"
        />
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
        >
        </Divider>
        <Field readonly>
          <template #label>
            <div class="label-style">内容</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field
            v-model="ActivityForm.content"
            rows="3"
            autosize
            type="textarea"
            maxlength="300"
            placeholder="请输入内容"
            show-word-limit
            size="large"
            :rules="[{ required: true, message: '请填写内容' }]"
        />
      </CellGroup>

      <CellGroup style="margin-top: 20px;border: 1px solid black">
        <Button block type="success"
                native-type="submit">
          保存
        </Button>
      </CellGroup>
    </Form>
  </div>
</template>

<style scoped>
.bg{
  height: 735px; /* 设置高度为页面可视区域的100% */
  background-color: #d3e8d3; /* 设置背景颜色 */
  padding: 20px;
}

.label-style{
  font-size: 16px;
  font-weight: bold;
  color: black;
}
</style>